<template>
  <div class="page">
    <breadcrumb>大学优先填报</breadcrumb>
    <!-- 侧滑大学内容 -->
    <school-detail ref="refsSchoolDetail" @event="getSchoolData"></school-detail>

    <!-- 侧栏备选库 -->
    <alternative @event="bindSwitch" :sum="$store.state.schoolSum">
      <school-alternative ref="childAlternative"></school-alternative>
    </alternative>

    <!-- 飞入备选库动画 -->
    <flying ref="refFlying" class="flying"></flying>

    <div class="content scroll-wrap">
      <screen :batch = "batch" @screenClick="bindScreen"></screen>
      <div class="top-select">
        <select-sort @event="bindSelect"></select-sort>
      </div>
      <div v-if="list.length > 0">
        <div v-for="(item,index) in list" :key="index">
          <ul class="school-items flex-row">
            <li class="probability">
              <block type="probability" :data="{id:item.chongShouBao.id, name:item.chongShouBao.name, probability:item.probability}" :item="item"></block>
            </li>
            <li class="flex" @click="bindSchool(item)">
              <block type="school" :data="{img:item.schoolBadge, name:item.collegeName, city:item.city, typeName:item.collegeTypeName,level:item.collegeLevelList}" :item="item"></block>
            </li>
            <li>
              <block type="plan" :data="{year:item.year, plan:item.studentPlan, list:item.collegeScoreLines}" :item="item"></block>
            </li>
            <li class="operation flex-row--c">
              <div
                class="block-btn--add"
                :class="item.choose && 'active'"
                @click="add(item, $event)">
                  {{item.choose?'已添加备选库':'添加至备选库'}}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <no-content v-else :text="text"></no-content>
    </div>
    <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
  </div>

</template>

<script>
import { api } from '@/utils'
import selectSort from '~/components/slot/select-sort'
import alternative from '~/components/animation/alternative'
import flying from '~/components/animation/flying'
import _ from 'lodash'
import schoolAlternative from './school-alternative'
import schoolDetail from './school-detail'
const COMPONENTS = {
  selectSort,
  alternative,
  schoolAlternative,
  flying,
  schoolDetail
}
export default {
  layout: 'zhiyuan-select',
  components: COMPONENTS,
  data () {
    return {
      batch: '',
      list: [],
      categoryList: [],
      majorData: [],
      params: {
        page: 0,
        size: 15
      },
      totalElements: 0,
      page: 1,
      loading: false,
      text: '正在加载...',
      praiseflag: true,
      pageType: 'volunteer',
      oneTime: 0,
      id: '',
      sum: 0
    }
  },
  methods: {
    getCnt () {
      // 获取备选库大学数量
      this.$axios.get(api.getCollegeFirstCnt, {params: {_: (new Date()).getTime()}}).then(data => {
        this.$store.commit('setSchoolSum', data)
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
      })
    },
    bindScreen (data) {
      for (let index in data) {
        this.params[index] = data[index]
      }
      this.params.page = 0
      this.page = 1
      this.getSchoolData()
    },
    bindSelect (value) {
      this.params.sortRule = value
      this.params.page = 0
      this.page = 1
      this.getSchoolData()
    },
    // 点击学校右侧弹出
    bindSchool (data) {
      // this.id = data.collegeId
      this.$refs.refsSchoolDetail.init(data) // 大学详情ID
    },
    bindSwitch (value) {
      // 右侧备选库展开触发备选库加载数据，关闭刷新页面数据
      if (value) {
        this.$refs.childAlternative.getAlternative()
      } else {
        this.getSchoolData()
      }
    },
    // 添加或取消添加备选库
    add (item, event) {
      // 加入备选库才有小动画
      if (!item.choose) {
        this.$nextTick(() => {
          this.$refs.refFlying.init(event)
        })
      }

      let _schoolSum = this.$store.state.schoolSum
      let _sum = item.choose ? _schoolSum - 1 : _schoolSum + 1
      this.$store.commit('setSchoolSum', _sum)
      item.choose = !item.choose

      let params = {
        college: { id: item.id }
      }
      this.$axios.post(api.setFirstCollege, params).then(data => {
        // this.$store.commit('setSchoolSum', this.sum)
        console.log('添加大学成功')
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
        this.getSchoolData()
        this.getCnt()
      })
    },
    getSchoolData () {
      this.params._ = (new Date()).getTime() // IE下会缓存，加个时间戳禁止缓存
      this.$axios.get(api.queryFirstCollege, { params: this.params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content
            this.totalElements = data.totalElements
            // 加载状态结束
            this.loading = false
          } else {
            this.list = []
            this.text = '暂无数据'
          }
        } else {
          this.text = '暂无数据'
          this.list = []
          this.totalElements = 0
        }
        console.log('整体数据------', this.list)
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
      this.getCnt()
    },
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getSchoolData()
    }
  },
  created () {
    this.batch = this.$route.query
    this.params.batchIds = this.batch ? this.batch.batchId : ''
    this.getSchoolData()
  }
}
</script>

<style scoped lang="scss">
// 动画结束位置
.flying{ position: fixed; right:0px; top:50%; margin-top:15px;}

.top-select{
  padding:25px 0 20px;
  border-bottom:1px solid $line;
}

.school-items{
  width:100%;
  border-bottom:1px solid $line;
  .probability{
    width:150px;
    padding-right:50px;
  }
  .operation{
    padding:0 50px;
  }
}

.page {
  // height: 100%;
  // display: flex;
  // flex-direction: column;
  .content {
    padding: 0;
    // flex: 1;
    // overflow-y: auto;
  }
}
</style>
